<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>全屏拼音</title>
    <script src="../libs/Unify.js"></script>
    <script src="../libs/moonJs.js"></script>
    <script src="../libs/TweenMax.min.js"></script>
    <script src="../libs/ColorManager.js"></script>
    <script src="../libs/PinyinFactory.js"></script>
    <script src="../libs/easeljs.js"></script>
    <script src="../libs/moonEaseljs.js"></script>
    <script src="../libs/SoundFactory.js"></script>
    <!-- <script src="../libs/Tone.js"></script> -->
    <!-- <script src="../libs/vconsole.js"></script> -->
    <style type="text/css">
        body {
            margin: 0;
            background-color: #07aa8f;
        }
    </style>
</head>

<body>
    <script>
        const url='https://ywx620.gitee.io/learn/rec/sound/hanzi/$num.mp3';
        const [width,height]=[window.innerWidth-5,window.innerHeight-5]
        createjs.Ticker.framerate = 30;
        var canvas=document.createElement('canvas');
        [canvas.width,canvas.height]=[width,height];
        document.body.appendChild(canvas);
        var stage=new createjs.Stage(canvas);
        createjs.Ticker.addEventListener("tick",(e)=>{stage.update();});
        
        let fontSize=30;
        if(Unify.isMobile()){
            fontSize=50;
        }
                
        let label=moonText('汉语拼音字母表',fontSize,'#FFF');
        stage.addChild(label);
        [label.x,label.y]=[width/2,5];

        const colors=ColorManager.warnCoolColors([2,3,5,8,11,10,11,9])
        const all=PinyinFactory.all();
        const labels=all.zw;
        let [x,y,xnum,wid,hei]=[10,10,8,0,0];
        wid=width/(xnum+1);
        hei=height/(xnum+8);
        all.sm.push('');//为了对齐加入一个空字符
        draw(all.sm,50,0,0);
        draw(all.ym,50+hei*4,1);
        draw(all.zt,50+hei*8,2);
        draw(all.sd,50+hei*11,3);
        draw(['拼音2','删除',''],50+hei*13,4);
        function draw(arr,offy=0,t=0){
            let color=colors[t];
            let boxs=[];
            for(let i=0;i<arr.length;i++){
                let name=arr[i];
                let box=moonBoxText(wid,hei,10,name,fontSize,color,'#FFFFFF',true);
                box.name=name;
                moonClick(box,onClick);
                boxs.push(box);
                stage.addChild(box);
            }
            let label=moonText(labels[t],fontSize/1.5,'#FFF');
            label.textAlign="left";
            [label.x,label.y]=[x+wid/2,offy-fontSize/2]
            stage.addChild(label);
            Unify.displayRank(boxs,xnum,wid/xnum,hei/xnum,x+wid/2,y+hei/2+offy)

            if(t==4){
                label.textAlign="center";
                label.x=width/2;
                label.text='输入拼音';
                let box=boxs[2];
                box.x=width/2;
                box.name='pinyin'
                this.input=box.text;
                box.bg.graphics.clear();
                let [w,h,r]=[wid*2,hei,10]
                box.bg.graphics.f(color).rr(-w/2,-h/2,w,h,r);
                moonMouse(box,false);
            }
        }

        function onClick(e){
            let name=e.currentTarget.name;
            if(name=='拼音2'){
                window.open('fullPinyin2.html');
            }else if(name=='删除'){
                this.input.text='';
                SoundFactory.array([url.replace('$num','shān'),url.replace('$num','chú')]);
            }else if(name=='pinyin'){
                name=this.input.text;
                if(name){
                    if(PinyinFactory.check(name)){
                        playSound(name);
                    }else{
                        alert('输入的拼音不正确');
                        this.input.text=''
                    }
                }
            }else if(name){
                //console.log(name,all.sd.includes(name))
                if(all.sd.includes(name)){
                    let py=this.input.old+(all.sd.indexOf(name)+1);
                    py=PinyinFactory.changePinyin(py,1);
                    this.input.text=py;
                    return;
                }
                let url='https://ywx620.gitee.io/learn/rec/sound/pinyin/all/$num.mp3';
                url=url.replace('$num',name);
                //console.log(url);
                //console.log(this.input)
                this.input.text+=name;
                this.input.old=this.input.text;
                SoundFactory.alone(url);
            }
        }

        function playSound(name){
            if(!PinyinFactory.checkCA(name)){
                name=PinyinFactory.changePinyin(name+'1',1)
            }
            let u=url.replace('$num',name);
            SoundFactory.alone(u);
            console.log(u)
            // if(sound){
            //     sound.setUrl(u);
            // }else{
            //     sound=moonjs.createSound(u);
            // }
            // const player = new Tone.Player(u).toDestination();
            // Tone.loaded().then(() => {
            //     player.start();
            // });
        }
        //H5移动端调试神器 - vconsole.js
        //window.onload = function() { var vConsole = new VConsole()}
    </script>
</body>

</html>
